home *** CD-ROM | disk | FTP | other *** search
/ RComp HTML Edit Studio for RISC OS / RComp HTML Edit Studio for RISC OS.iso / ZIPS / HTML.ZIP / HTMLEdit / Tutorial / Primer next >
Encoding:
Text File  |  1997-05-05  |  30.7 KB  |  945 lines
  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2//EN">
  2. <HTML><HEAD>
  3. <TITLE>A Beginner's Guide to HTML</TITLE></HEAD>
  4. <BODY>
  5.  
  6. <H1>A Beginner's Guide to HTML</H1>
  7.  
  8. This is a primer for producing documents
  9. in HTML, the markup language used by the World Wide Web.
  10.  
  11. <UL>
  12. <LI> <A NAME=14 HREF="#Acronyms">Acronym expansion 
  13.      - the World Wide Web alphabet soup</A>
  14. <LI> <A NAME=15 HREF="#MinimalHTML">The minimal HTML document</A>
  15.      <UL>
  16.      <LI><A HREF="#Titles">Titles</A>
  17.      <LI><A HREF="#Headings">Headings</A>
  18.      <LI> <A HREF="#Paragraphs">Paragraphs</A>  
  19.      </UL>
  20. <LI> <A NAME=18 HREF="#Links">Linking to other documents</A>
  21. <UL>
  22. <LI> <A NAME=19 HREF="#URL">Uniform Resource Locator (URL)</A>
  23. <LI> <A NAME=20 HREF="#NamedAnchorOther">Anchors to specific sections
  24.      in other documents</A>
  25. <LI> <A NAME=21 HREF="#NamedAnchorSame">Anchors to specific sections
  26.      in the same document</A>
  27. </UL>
  28.  
  29. <LI> <A NAME=22 HREF="#MoreTags">Additional markup tags</A>
  30. <UL>
  31. <LI> <A NAME=23 HREF="#Lists">Lists</A>
  32. <UL>
  33. <LI><A NAME=24 HREF="#UnnumberedLists">Unnumbered lists</A>
  34. <LI><A NAME=25 HREF="#NumberedLists">Numbered lists</A>
  35. <LI> <A NAME=26 HREF="#DescriptiveLists">Descriptive lists</A>
  36. <LI> <A NAME=27 HREF="#NestedLists">Nested Lists</A>
  37. </UL>
  38.  
  39. <LI> <A NAME=28 HREF="#Preformatted">Preformatted text</A>
  40. <LI> <A NAME=29 HREF="#Blockquote">Extended quotes</A>
  41. <LI> <A NAME=30 HREF="#CharFormat">Character formatting</A>
  42. <LI> <A NAME=31 HREF="#SpecialChar">Special characters</A>
  43. </UL>
  44.  
  45. <LI> <A NAME=32 HREF="#InlineImage">Inline images</A>
  46. <LI> <A NAME=33 HREF="#ExternalImage">External images</A>
  47. <LI> <A NAME=34 HREF="#Troubleshooting">Troubleshooting</A>
  48. <LI> <A NAME=35 HREF="#ExtendedExample">A longer example</A>
  49. <LI> <A NAME=36 HREF="#MoreInfo">For more information</A>
  50. </UL>
  51.  
  52. <A NAME="Introduction">
  53. <H2>Introduction</H2>
  54. </A>
  55.  
  56. <A NAME="Acronyms">
  57. <H3>Acronym expansion</H3>
  58. </A>
  59.  
  60. <DL>
  61. <DT> <i>WWW</I>
  62. <DD> World Wide Web
  63. <DT> <i>SGML</I>
  64. <DD> Standard Generalized Markup Language - This is perhaps best be
  65.      thought of as a programming language for style sheets.
  66. <DT> <i>DTD</I>
  67. <DD> Document Type Definition - This is a specific implementation 
  68.      of document description using SGML.
  69.      One way to think about this is: Fortran is to a computer program as
  70.      SGML is to a DTD. 
  71. <DT> <i>HTML</I>
  72. <DD> HyperText Markup Language - HTML is a SGML DTD. In practical terms,
  73.      HTML is a collection of styles used to define the various components
  74.      of a World Wide Web document.
  75. <DT> 
  76. <DD> 
  77. </DL>
  78.  
  79. <A NAME="NotCovered">
  80. <H3>What this primer doesn't cover</H3>
  81. </A>
  82.  
  83. This primer assumes that you have:
  84. <UL>
  85. <LI> at least a passing knowledge of how to use NCSA
  86.      Mosaic or other WWW browser 
  87. <LI> a general understanding of how World Wide Web servers
  88.      and client browsers work and
  89. <LI> access to a World Wide Web server for
  90.      which you would now like to produce HTML documents
  91. </UL>
  92.  
  93. <A NAME="CreatingHTML">
  94. <H3>Creating HTML documents</H3>
  95. </A>
  96.  
  97. HTML documents are in plain text format and can be created using any
  98. text editor (e.g., Emacs or vi on Unix machines). 
  99. A couple of WWW browsers (tkWWW for X Window System machines and
  100. CERN's WWW browser for the NeXT) do include rudimentary HTML editors
  101. in a WYSIWYG environment, and you may want to try one of them first
  102. before delving into the details of HTML.  <P>
  103.  
  104. <blockquote>
  105. <i>
  106. You can preview documents in progress with NCSA Mosaic (and some other
  107. WWW browers). 
  108. Open the document using the Open Local option under the <b>File</b> menu. 
  109. Use the Filters,
  110. Directories, and Files fields to locate the document or
  111. enter the path and name of the document in the 
  112. Name of Local Document to Open field. Press OK.
  113. </p>
  114.  
  115. If you see
  116. edits you want to make, enter them in the source file. Save the changes.
  117. Return to NCSA Mosaic and press the <b>Reload</b> button on the
  118. bottom menu. The edits are reflected in the on-screen display.<P>
  119. </i>
  120. </blockquote>
  121.  
  122. <A NAME="MinimalHTML">
  123. <H2>The minimal HTML document</H2>
  124. </A>
  125.  
  126. Here is a barebones example of HTML:  <P>
  127. ____________________________________________________________________
  128. <PRE>
  129.   <TITLE>The simplest HTML example</TITLE>
  130.  
  131.   <H1>This is a level one heading</H1>
  132.  
  133.   Welcome to the world of HTML.  
  134.   This is one paragraph.<P>
  135.  
  136.   And this is a second.<P>
  137. </PRE>
  138. ____________________________________________________________________
  139. <p>
  140. <A NAME=10 HREF="/General/Internet/WWW/MinimalHTML.html">Click here</A> to see the formatted
  141. version of the example.
  142. <p>
  143.  
  144. HTML uses <dfn>tags</dfn> to tell the World Web viewer how to display
  145. the text. The above example uses 
  146.  
  147. <UL>
  148. <LI> the <code><TITLE></code> tag (which
  149. has a correspondinging <code></TITLE></code> tag), which specifies
  150. the title of the document,
  151. <LI>the <code><H1></code> header tag
  152. (with corresponding <code></H1></code>), and
  153. <LI>the <code><P></code> end-of-paragraph tag.
  154. </UL>
  155.  
  156. HTML tags consist of a left angular bracket (<code><</code>), known
  157. as a ``less than'' symbol to mathematicians, followed by some text
  158. (called the <dfn>directive</dfn>) and closed
  159. by a right angular bracket (<code>></code>). 
  160. Tags are usually paired, e.g. <code><H1></code> and <code></H1></code>.
  161.  
  162. The ending tag looks just like the starting tag except 
  163. a slash (/) precedes the text within the brackets.  
  164. In the example, <code><H1></code> tells the viewer to
  165. start formatting a top level heading; 
  166. <code></H1></code> tells the viewer that the heading is complete. 
  167. <P>
  168.  
  169. The primary exception to the pairing rule is the <code><P></code>
  170. end-of-paragraph tag.  There is no such thing as <code></P></code>.<P>
  171.  
  172. <strong>Note:</strong> HTML is <EM>not</EM> case senstive. 
  173. <code><title></code> is completely equivalent
  174. to <code><TITLE></code> or <code><TiTlE></code>.  <P>
  175.  
  176. Not all tags are supported by all World Wide Web browsers.
  177. If a browser does not support a tag, it should just ignore it, though.  <P>
  178.  
  179. <A NAME="Titles">
  180. <H3>Titles</H3>
  181. </A>
  182. Every HTML document should have a title. A title is generally
  183. displayed separately from
  184. the document and is used primarily for document identification in other
  185. contexts (e.g., a WAIS search). Choose about half a dozen
  186. words that describe the document's purpose.
  187.  
  188. <blockquote>
  189. <i>
  190. In NCSA Mosaic, the Document Title field is at the top of the screen 
  191. just below the pulldown menus. <P>
  192. </i>
  193. </blockquote>
  194.  
  195. The directive for the title tag is <code><title></code>.
  196. The title generally goes on the first line of the document.  <P>
  197.  
  198. <A NAME="Headings">
  199. <H3>Headings</H3>
  200. </A>
  201. HTML has six
  202. levels of headings (numbered 1 through 6), with 1 being the most prominent.
  203. Headings are displayed in larger and/or bolder fonts than the normal
  204. body text. The first heading in each document should be tagged 
  205. <code><H1></code>.
  206.  
  207. The syntax of the heading tag is:
  208. <PRE>
  209.   <H<var>y</var>><var>Text of heading</var></H<var>y</var>>
  210. </PRE>
  211. where <var>y</var> is a number between 1 and 6 specifying the level
  212. of the heading.  <P>
  213.  
  214. For example, the coding for the ``Headings'' section heading above is
  215. <PRE>
  216.   <H3>Headings</H3>
  217. </PRE>
  218.  
  219. <strong>Title versus first heading</strong>: 
  220. In many documents (including this one), the first heading is identical
  221. to the title. For multi-part documents, the text of the first heading
  222. should be suitable for a reader who is already browsing
  223. related information (e.g., a chapter title), while the title 
  224. tag should identify the node in a wider context (e.g., include
  225. both the book title and the chapter title).  <P>
  226.  
  227. <A NAME="Paragraphs">
  228. <H3>Paragraphs</H3>
  229. </A>
  230.  
  231. Unlike documents in most word processors, 
  232. carriage returns and white space in HTML files aren't significant.
  233. Word wrapping can occur at any point in your source file, and multiple
  234. spaces are collapsed into a single space (except in
  235. the <TITLE> field). Notice that in the barebones example,
  236. the first paragraph is coded as <P>
  237. <PRE>
  238.   Welcome to HTML.
  239.   This is the first paragraph. <P>
  240. </PRE>
  241. In the source file, there is a line break between the sentences. 
  242. A Web browser ignores this line break and starts
  243. a new paragraph only when it reaches a <code><P></code> tag.  <P>
  244.  
  245. <strong>Important:</strong>
  246. You must end each paragraph with <code><P></code>. The viewer
  247. ignores any indentations or blank lines in the source text. Without
  248. the <code><P></code> tags, the document becomes one large paragraph. HTML
  249. relies almost entirely on the tags for formatting instructions. (The
  250. exception is text tagged as ``preformatted,'' explained
  251. <A NAME=12 HREF="#Preformatted">below</A>.) For instance, the following
  252. would produce identical output as the first barebones HTML example:   <P>
  253. ________________________________________________________________________
  254. <PRE>
  255.   <TITLE>The simplest HTML example</TITLE><H1>This is a level 
  256.   one heading</H1>Welcome to the world of HTML. This is one 
  257.   paragraph.<P>And this is a second.<P>
  258. </PRE>
  259. ________________________________________________________________________
  260. <P>
  261.  
  262. However, to preserve readability in HTML files, headings should be 
  263. on separate lines, and paragraphs should be separated by blank lines. <P>
  264.  
  265. <A NAME="Links">
  266. <H2>Linking to other documents</H2>
  267. </A>
  268.  
  269. The chief power of HTML comes from its ability to <dfn>link</dfn> regions
  270. of text (and also images) to another document (or an image). 
  271. These regions are typically
  272. highlighted by the browser to indicate that they are hypertext links.
  273.  
  274. <blockquote>
  275. <i>
  276. In NCSA Mosaic, hypertext links are in color and underlined by default.
  277. It is possible to modify this in the Options menu as well as in your 
  278. .Xdefaults file.
  279. </i>
  280. </blockquote>
  281.  
  282. HTML's single hypertext-related directive is <code>A</code>,
  283. which stands for anchor. To include anchors in your document: <P>
  284.  
  285. <OL>
  286. <LI> Start by opening the anchor with the leading angle bracket
  287.         and the anchor directive followed by a space: <code><a</code>
  288. <LI> Specify the document that's being pointed to by giving the
  289.         parameter
  290.         <code> href="filename.html" </code> followed by a 
  291.         closing angle bracket: <code>></code>
  292. <LI> Enter the text that will serve as the hypertext
  293.         link in the current document
  294.         (i.e., the text that will be in a
  295.         different color and/or underlined)
  296. <LI> Enter the ending anchor tag: <code></A></code>
  297. </OL>
  298.  
  299. Below is an sample hypertext reference:  <P>
  300.  
  301. <PRE>
  302.   <a href="MaineStats.html">Maine</a>
  303. </PRE>
  304.  
  305. This entry makes ``Maine'' the hyperlink to the document
  306. <samp>MaineStats.html</samp>.  <P>
  307.  
  308. <A NAME="URL">
  309. <H3>Uniform Resource Locator</h3>
  310. </A>
  311.  
  312. A Uniform Resource Locator (URL) refers to the format used by WWW
  313. documents to locate other files. A URL gives the type of resource being
  314. accessed (e.g., gopher, WAIS) and the path of the file. The format used is:<p>
  315.  
  316. <pre>
  317. <var>scheme</var>://<var>host.domain</var>[:<var>port</var>]/<var>path</var>/<var>filename</var>
  318. </pre>
  319.  
  320. where <dfn>scheme</dfn> is one of: 
  321. <DL>
  322. <DT> <code>file</code>
  323. <DD> a file on your local system, or a file on an anonymous ftp server
  324. <DT> <code>http</code>
  325. <DD> a file on a World Wide Web server
  326. <DT> <code>gopher</code>
  327. <DD> a file on a Gopher server
  328. <DT> <code>WAIS</code>
  329. <DD> a file on a WAIS server
  330. </DL>
  331. The scheme can also be <code>news</code> or <code>telnet</code>, but these
  332. are used much less often than the above.
  333.  
  334. The port number can generally be omitted from the URL.  <P>
  335.  
  336. For example if you wanted to insert a link to this primer, you would insert
  337. <PRE>
  338.   <A HREF="http://www.ncsa.uiuc.edu/General/Internet/WWW/HTMLPrimer.html">
  339.   NCSA's HTML Primer</A>
  340. </PRE>
  341. into your document. This would make the text ``NCSA's HTML Primer'' 
  342. a hyperlink leading to this document.  <P>
  343.  
  344. Refer to the 
  345. <A HREF="http://info.cern.ch/hypertext/WWW/Addressing/Addressing.html">
  346. Addressing</a> document prepared by CERN for additional 
  347. information about URLs.
  348. <cite>A Beginner's
  349. <A HREF="http://www.ncsa.uiuc.edu/demoweb/url-primer.html">Guide</a>
  350. to URLs</cite> is located
  351. on the NCSA Mosaic Help menu.   <P>
  352. <A NAME="NamedAnchorOther">
  353. <h3> Anchors to Specific Sections in Other Documents</h3>
  354. </A>
  355. Anchors can also be used to move to a particular section in 
  356. a document. 
  357.  
  358. Suppose you wish to set a link from document A and a specific
  359. section in document B. First you need to set up what is called
  360. a <dfn>named anchor</dfn> in document B. For example, to add an
  361. anchor named ``Jabberwocky" to document B, you would insert 
  362.  
  363. <PRE>
  364.   Here's <A NAME="Jabberwocky">some text</a>.
  365. </PRE>
  366.  
  367. Now when you create the link in document A, you include not
  368. only the filename, but also the named anchor, separated by a hash
  369. mark(``#''):
  370.  
  371. <PRE>
  372.     This is my <A HREF="documentB.html#Jabberwocky">link</a>.
  373. </PRE>
  374.  
  375. Now clicking on the word ``link'' in document A
  376. would send the reader directly to the words ``some text'' in document B.
  377.  
  378. <A NAME="NamedAnchorSame">
  379. <h3> Anchors to Specific Sections within the Current Document</h3>
  380. </A>
  381.  
  382. The technique is exactly the same except the file name is now
  383. omitted.  <P>
  384.  
  385. <strong>Note:</strong> The NCSA Mosaic <b>Back</b> button does not work 
  386. for an anchor within
  387. a document because the <b>Back</b> button is designed to move
  388. to a previous document. Move back manually within the document using the 
  389. scroll bar. (The <b>Back</b> button will return to the start
  390. of a hyperlink effective with Version 2.0 of NCSA Mosaic.)<p> 
  391.  
  392. <A NAME="MoreTags">
  393. <H2>Additional markup tags</H2>
  394. The above is sufficient to produce simple HTML documents. For more
  395. complex documents, HTML also has tags for several types of lists, 
  396. extended quotes, character formatting and other items, all described
  397. below.
  398.  
  399. <A NAME="Lists">
  400. <H3>Lists</H3>
  401. </A>
  402.  
  403. HTML supports unnumbered, numbered, and descriptive lists.
  404. For list items, no
  405. paragraph separator is required. The tags for the items in the list 
  406. terminate each list item.
  407.  
  408. <A NAME="UnnumberedLists">
  409. <h4> Unnumbered Lists </h4>
  410. </A>
  411.  
  412. <oL>
  413. <LI> Start with an opening list <code><ul></code> tag.
  414. <LI> Enter the <code><li></code> tag followed by the
  415. individual item. (Remember that no closing tag is needed.)
  416. <LI> End with a closing list <code></ul></code> tag.
  417. </oL>
  418.  
  419. Below an example two-item list:  <P>
  420.  
  421. <PRE>
  422.   <UL>
  423.   <LI> apples
  424.   <LI> bananas
  425.   </UL>
  426. </PRE>
  427.  
  428. The output is:<p>
  429. <ul>
  430. <li>apples
  431. <li>bananas
  432. </ul>
  433. <p>
  434.  
  435. Note that different viewers display an unordered list differently. A viewer
  436. might use bullets, filled circles, or dashes to show the items. <p>
  437.  
  438. <A NAME="NumberedLists">
  439. <h4>Numbered Lists </h4>
  440. </A>
  441.  
  442. A numbered list (also called an ordered list, from where the
  443. abbreviation comes) uses the <code><ol></code>
  444. directive to start a list 
  445. rather than the <code><ul></code> directive.  The items are
  446. tagged using the same <code><li></code> tag as for a bulleted list. 
  447. For example:  <P>
  448.  
  449. <PRE>
  450.   <OL>
  451.   <LI> oranges
  452.   <LI> peaches
  453.   <LI> grapes
  454.   </OL>
  455. </PRE>
  456.  
  457. The list looks like this online:<p>
  458. <ol>
  459. <li>oranges
  460. <li>peaches
  461. <li>grapes
  462. </ol>
  463. <p>
  464.  
  465. <A NAME="DescriptiveLists">
  466. <h4>Descriptive Lists </h4>
  467. </A>
  468.  
  469. A description list usually consists of alternating a <dfn>description
  470. title</dfn> (abbreviated as dt) and a <dfn>description description</dfn> 
  471. (abbreviated
  472. as dd). The description generally starts on a new line, because the viewer
  473. allows the full line width for the contents of the dt field.<P>
  474.  
  475. Below is an example description list as included in your source file:  <P>
  476.  
  477. <PRE>
  478.   <DL>
  479.   <DT> National Center for Supercomputing Applications
  480.   <DD> NCSA is located on the campus of the University 
  481.   of Illinois at Urbana-Champaign. NCSA is a one of 
  482.   four member institutions in the National Metacenter for 
  483.   Computational Science and Engineering.
  484.   <DT> Cornell Theory Center
  485.   <DD> CTC is located on the campus of Cornell 
  486.   University in Ithaca, New York. CTC is another member 
  487.   of the National Metacenter for  Computational Science 
  488.   and Engineering.
  489.   </DL>
  490. </PRE>
  491.  
  492. The output looks like this: <P>
  493.  
  494. <DL>
  495. <DT> National Center for Supercomputing Applications
  496. <DD> NCSA is located on the campus of the University of Illinois
  497.      at Urbana-Champaign. NCSA is a one of four member institutions in the
  498.      National Metacenter for Computational Science and Engineering.
  499. <DT> Cornell Theory Center
  500. <DD> CTC is located on the campus of Cornell University in Ithaca,
  501. New York. 
  502.      CTC is another member of the National Metacenter for Computational 
  503.      Science and Engineering.
  504. </DL>
  505.  
  506. The <code><DT></code> and <code><DD></code> 
  507. entries can contain multiple
  508. paragraphs (separated by paragraph tags), lists, or other description
  509. information.  <P>
  510.  
  511. <A NAME="NestedLists">
  512. <h4> Nested Lists </h4>
  513. </A>
  514.  
  515. Lists can be arbitrarily nested. A list item can itself contain
  516. lists. You can also have a number of paragraphs, each themselves containing
  517. nested lists, in a single list item, and so on. <p>
  518.  
  519. Remember that the display of an unordered list varies with the 
  520. viewer. A browser may not provide
  521. successive levels of indentation or modify the bullets used at each level. 
  522.  
  523. <blockquote>
  524. <i>
  525. NCSA
  526. Mosaic indents the second level in the following list and changes
  527. the ``bullet'' from a bullet to a small box.<P>
  528. </i>
  529. </blockquote>
  530.  
  531. An example nested list:  <P>
  532.  
  533. <PRE>
  534.   <UL>
  535.   <LI> A few New England states:
  536.     <UL>
  537.     <LI> Vermont
  538.     <LI> New Hampshire
  539.     </UL>
  540.   <li> One Midwestern state:
  541.     <UL>
  542.     <LI> Michigan
  543.     </UL>
  544.   </UL>
  545. </PRE>
  546.  
  547. The nested list is displayed as  <P>
  548.  
  549. <UL>
  550. <LI> A few New England states:
  551. <UL>
  552. <LI> Vermont
  553. <LI> New Hampshire
  554. </UL>
  555. <LI>One Midwestern state:
  556. <UL>
  557. <LI> Michigan
  558. </UL>
  559. </UL>
  560.  
  561. <A NAME="Preformatted">
  562. <H3>Preformatted Text</H3>
  563. </A>
  564.  
  565. Use the <code>pre</code> tag (which stands for ``preformatted'')
  566. to include text in a fixed-width font and to cause
  567. spaces, new lines, and tabs to be significant. This is
  568. useful for program
  569. listings. For
  570. example, the following lines in your source file: <P>
  571.  
  572. <pre>
  573. <PRE>
  574.   #!/bin/csh                           
  575.   cd $SCR                             
  576.   cfs get mysrc.f:mycfsdir/mysrc.f   
  577.   cfs get myinfile:mycfsdir/myinfile   
  578.   fc -02 -o mya.out mysrc.f           
  579.   mya.out                              
  580.   cfs save myoutfile:mycfsdir/myoutfile 
  581.   rm *                                
  582. </PRE>
  583. </pre>
  584.  
  585. display as:
  586.  
  587. <PRE>
  588.   #!/bin/csh                           
  589.   cd $SCR                             
  590.   cfs get mysrc.f:mycfsdir/mysrc.f   
  591.   cfs get myinfile:mycfsdir/myinfile   
  592.   fc -02 -o mya.out mysrc.f           
  593.   mya.out                              
  594.   cfs save myoutfile:mycfsdir/myoutfile 
  595.   rm *                                
  596. </PRE>
  597.  
  598. Hypertext references (and other HTML tags)
  599. can be used within <pre> sections.
  600.  
  601. <A NAME="Blockquote">
  602. <H3>Extended quotes</H3>
  603. </A>
  604.  
  605. Use the <code><blockquote></code> and <code></blockquote></code> 
  606. tags to include
  607. quotations in a separate block on the screen.  <P>
  608.  
  609. For example
  610. <PRE>
  611.   <blockquote>
  612.   Let us not wallow in the valley of despair. I say to you, my
  613.   friends, we have the difficulties of today and tomorrow. <P>
  614.  
  615.   I still have a dream. It is a dream deeply rooted in the
  616.   American dream. <P>
  617.  
  618.   I have a dream that one day this nation will rise up and 
  619.   live out the true meaning of its creed. We hold these truths 
  620.   to be self-evident that all men are created equal. <P>
  621.   </blockquote>
  622. </PRE>
  623.  
  624. The result is
  625. <blockquote>
  626. Let us not wallow in the valley of despair. I say to you, my
  627. friends, we have the difficulties of today and tomorrow.<P>
  628.  
  629. I still have a dream. It is a dream deeply rooted in the
  630. American dream.<P>
  631.  
  632. I have a dream that one day this nation will rise up and 
  633. live out the true meaning of its creed. We hold these 
  634. truths to be self-evident that all men are created equal.<P>
  635. </blockquote>
  636.  
  637. <A NAME="Addresses">
  638. <H3>Addresses</H3>
  639. </A>
  640.  
  641. The <code><ADDRESS></code> tag is generally used 
  642. within HTML documents to specify
  643. the author of a document and provides a means of contacting the author (e.g.,
  644. an email address). This is usually the last item in a file and generally 
  645. starts on a new, left-justified line. <P>
  646.  
  647. For example, the last part of the HTML file for this primer is
  648. <PRE>
  649.   <ADDRESS>
  650.   A Beginner's Guide to HTML / NCSA / pubs@ncsa.uiuc.edu
  651.   </ADDRESS>
  652. </PRE>
  653.  
  654. The result is:<p> 
  655. <address>A Beginner's Guide to HTML / NCSA / pubs@ncsa.uiuc.edu</address> <P>
  656.  
  657. <A NAME="CharFormat">
  658. <H3>Character formatting</H3>
  659. </A>
  660.  
  661. Individual words or sentences can be put in special styles. 
  662. <dfn>Logical</dfn> styles are
  663. those that are configured by your viewer.  For example, 
  664. <code><CITE></code>
  665. may be defined as italic by your viewer. Each time you enter 
  666. <code><CITE></code>
  667. tags, the viewer automatically displays the text in italics. <p>
  668.  
  669. A <dfn>physical</dfn> style
  670. is one that you determine, and the viewer displays 
  671. what you have coded. For example
  672. <code><I></code> tells the viewer to 
  673. display your text in italics. <P>
  674.  
  675. For HTML-coded documents, you should use 
  676. logical styles whenever possible. Future
  677. implementations of HTML may not implement physical styles at all. <p>
  678.  
  679. <UL>
  680. <li>Italic
  681.   <ul>
  682.   <LI> <code><I>text</i></code> puts text in italics
  683.         (<i>HTML Primer</i>)
  684.   <li> <code><em>text</em></code> also italicizes text (only <em>one</em> viewer)
  685.   <li> <code><cite>text</cite></code> is used for citations of names
  686.         of manuals, sections, or books (<cite>HTML Primer</cite>)
  687.   <li> <code><var>text</var></code> indicates a 
  688.         variable (<var>filename</var>)
  689. </ul>
  690. <li>Bold  
  691.   <ul>
  692.   <LI> <code><b>text</b></code> puts text in bold
  693.         (<b>Important</b>)
  694.   <li> <code><strong>text</strong></code> also emphasizes
  695.    text (<strong>Note:</strong>)
  696.    </ul>
  697. <li>Fixed width font
  698.    <ul>
  699.    <LI> <code><tt>text</tt></code> puts text in a fixed-width 
  700.         font (<tt>1 SU = 1 CPU hour</tt>)
  701.    <LI> <code><code>text</code></code> also puts text in 
  702.         a fixed-width font (<code>1 SU = 1 CPU hour</code>)
  703.    <li> <code><samp>text</samp></code> formats text for samples
  704.         (<samp>-la</samp>)
  705.    <li> <code><kbd>text</kbd></code> displays the names of 
  706.          keys on the keyboard (<kbd>HELP</kbd>)
  707.        </ul>
  708. <li>Other (the following special tag currently does not display in NCSA Mosaic)
  709.     <ul>
  710.     <li> <code><dfn>text</dfn></code> 
  711.          displays a definition in italics 
  712.     </ul>
  713. </UL>
  714.  
  715. <A NAME="SpecialChar">
  716. <H3>Special Characters</H3>
  717. </A>
  718.  
  719. Three <A NAME=characters>characters</A> out of the entire ASCII (or ISO 8859) character set
  720. are <i>special</i> and cannot be used ``as-is'' within an HTML document.
  721. These characters are left angle bracket (<code><</code>), right
  722. angle bracket (<code>></code>), and ampersand (<code>&</code>).  <P>
  723.  
  724. The angle brackets are used to specify HTML tags (as
  725. shown above), while the ampersand is used as the escape mechanism
  726. for these and other characters:
  727.  
  728. <UL>
  729. <LI> <code>&lt;</code> is the <i>escape sequence</i> for 
  730.         <code> <</code>
  731. <LI> <code>&gt;</code> is the escape sequence for 
  732.         <code> ></code>
  733. <LI> <code>&amp;</code> is the escape sequence for 
  734.         <code> &</code>
  735. </UL>
  736.  
  737. Note that ``escape sequence'' means that the given sequence of
  738. characters represents the single character in an HTML document and that 
  739. the semicolon is required. The
  740. conversion to the single character itself takes place when the
  741. document is formatted for display by a reader.  <P>
  742.  
  743. There are additional escape sequences, such as 
  744. a whole set of sequences to support
  745. 8-bit character sets (ISO 8859-1). For example:
  746.  
  747. <UL>
  748. <LI> <code>&ouml;</code> is the escape sequence for 
  749.         a lowercase <code>o</code> with an umlaut: ö
  750. <LI> <code>&ntilde;</code> is the escape sequence for 
  751.         a lowercase <code>n</code> with an tilde: ñ
  752. <LI> <code>&Egrave;</code> is the escape sequence for 
  753.         an uppercase <code>E</code> with a grave mark: È
  754. </UL>
  755.  
  756. Many such escapes exist and are available in a <A NAME=2
  757. HREF="http://info.cern.ch/hypertext/WWW/MarkUp/ISOlat1.html">listing</A>
  758.  from CERN.  <P>
  759.  
  760.  
  761. <A NAME="InlineImage">
  762. <H2>Inline Images</H2>
  763. </A>
  764.  
  765. NCSA Mosaic is can display X Bitmap (XBM) or GIF format images inside 
  766. documents. <i>Each image
  767. takes time to process and slows down the initial display of the
  768. document</i>. Using a particular image multiple times in a document
  769. causes very little performance degradation compared to using the image only once. <P>
  770.  
  771. <b>NOTE:</b> The <code><img></code> tag is an HTML extension 
  772. first implemented in NCSA Mosaic. Currently it is not
  773. understood by most other World
  774. Wide Web browsers.  <P>
  775.  
  776. To include an inline image in your document, enter:  <P>
  777.  
  778. <PRE>
  779.     <IMG SRC="filename.GIF">
  780. </PRE>
  781. <p>
  782.  
  783. <img src="filename.GIF"> By default the bottom of an image is aligned with
  784. the text as shown in this paragraph.
  785. <p>
  786.  
  787. <img align=top src="filename.GIF"> Include the <code>align=top</code> 
  788. parameter if you want the viewer 
  789. to align adjacent text with the top of the
  790. image as shown in this paragraph. The full inline image
  791. tag with the top alignment is: 
  792. <pre>
  793.     <IMG ALIGN=top SRC="filename.GIF">
  794. </pre>
  795. <p>
  796. If you have a larger image 
  797. (i.e., one that fills most of your screen),
  798. you should insert an end of paragraph tag (<code><p></code>) before 
  799. inserting the image parameter. End with another paragraph tag. 
  800. (Or you might want to have the 
  801. image open a new window, which is explained below.)
  802. </p>
  803.  
  804. <A NAME="ExternalImage">
  805. <h3> External Images </h3>
  806. </A>
  807.  
  808. You may want to have an image open as a separate document when a user
  809. activates a link on either a word or a smaller version of the image 
  810. that you have inlined
  811. into your document. This is considered an external image and is particularly
  812. useful because (assuming you use a word for your hypertext link) 
  813. you do not have 
  814. any processing time degradation in the main document. Even if you include a
  815. small image in your document as the hyperlink 
  816. to the larger image, the processing
  817. time for the ``postage stamp'' image is less than the full image.<p>
  818.  
  819. To include a reference to a graphic in an external document, use 
  820. <pre>
  821.     <A HREF = "filename.gif">link anchor</A>
  822. </pre> <p> 
  823. Make certain the image
  824. is in GIF, TIFF, JPEG, RGB, or HDF format.
  825.  
  826. <A NAME="Troubleshooting">
  827. <H2>Troubleshooting</H2>
  828. </A>
  829. <UL>
  830. <LI> While certain HTML constructs can be nested (for example, you
  831.         can have an anchor within a header), they cannot be overlapped.
  832.         For example, the following is <i>invalid</i> HTML:
  833. <PRE>
  834.     <h1>This is <a name="foo">invalid HTML.</h1></a>
  835. </PRE>
  836.      Because many current HTML parsers aren't very good at handling
  837.         invalid HTML, avoid overlapping constructs. <p>
  838.         
  839. <LI> In NCSA Mosaic, when an <code><img></code> tag points at 
  840.         an image that does not
  841.         exist or cannot be otherwise obtained from whatever server
  842.         is supposed to be serving it, the NCSA logo is substituted. 
  843.         For example, entering <code><img href="DoesNotExist.gif">
  844.         </code> (where
  845.         "DoesNotExist.gif" is a nonexistant file) causes the following to
  846.         be displayed: <iMG SRC="DoesNotExist.gif">  <P>
  847.  
  848.         If this happens to you, first make sure that the referenced
  849.         image does in fact exist and that the hyperlink has the correct
  850.         information in the link entry. 
  851.         Next verify that the file permission is set appropriately 
  852.         (world-readable). 
  853. </UL>
  854.  
  855. <A NAME="ExtendedExample">
  856. <H2>A Longer Example</H2>
  857. </A>
  858.  
  859. Here is a longer example
  860. of a HTML document:  <P>
  861. ________________________________________________________________________
  862. <PRE>
  863.   <TITLE>A Longer Example</TITLE>
  864.   <H1>A Longer Example</H1>
  865.  
  866.   This is a simple HTML document. This is the first
  867.   paragraph. <P>
  868.  
  869.   This is the second paragraph, which shows special effects.  This is a 
  870.   word in <I>italics</I>.  This is a word in <B>bold</B>.
  871.   Here is an inlined GIF image: <IMG SRC="myimage.gif">. 
  872.   <p>
  873.  
  874.   This is the third paragraph, which demonstrates links.  Here is 
  875.   a hypertext link from the word <A HREF="subdir/myfile.html">foo</A>
  876.   to a document called "subdir/myfile.html". (If you 
  877.   try to follow this link, you will get an error screen.) <P> 
  878.  
  879.   <H2>A second-level header</H2>
  880.  
  881.   Here is a section of text that should display as a 
  882.   fixed-width font: <P>
  883.  
  884.   <PRE>
  885.       On the stiff twig up there
  886.       Hunches a wet black rook
  887.       Arranging and rearranging its feathers in the rain ...
  888.   </PRE>
  889.  
  890.   This is a unordered list with two items: <P>
  891.  
  892.   <UL>
  893.   <LI> cranberries
  894.   <LI> blueberries
  895.   </UL>
  896.  
  897.   This is the end of my example document. <P>
  898.  
  899.   <address>Me (me@mycomputer.univ.edu)</address>
  900. </PRE>
  901. ________________________________________________________________________
  902. <p>
  903. <A NAME=37 HREF="/General/Internet/WWW/LongerExample.html">Click here</A> 
  904. to see the formatted version.
  905. <p>
  906.  
  907. <A NAME="MoreInfo">
  908. <H2>For More Information</H2>
  909. </A>
  910.  
  911. More <A NAME=information>information</A> on HTML is available through the
  912. following hyperlinks. <P>
  913.  
  914. <ul>
  915. <li><A HREF="/General/Internet/WWW/HTMLQuickRef.html">HTML Quick 
  916.     Reference Guide</a>, which gives a comprehensive listing of HTML codes
  917.  
  918. <li>the official HTML <A NAME=3
  919. HREF="http://info.cern.ch/hypertext/WWW/MarkUp/MarkUp.html">specs
  920. </A> 
  921.  
  922. <li>the in-development HTML <A NAME=6
  923. HREF="http://info.cern.ch/hypertext/WWW/MarkUp/HTML.html">RFC</A> (Request
  924. for Comments)
  925.  
  926. <li>a description of <A NAME=4
  927. HREF="http://info.cern.ch/hypertext/WWW/MarkUp/SGML.html">SGML</a>, 
  928. the Standard Generalized Markup Language 
  929.  
  930. <li>the <A NAME=5
  931. HREF="http://info.cern.ch/hypertext/WWW/Addressing/Addressing.html">URL 
  932. (Uniform Resource Locator) specification</A>
  933.  
  934. <li>the <A NAME=8
  935. HREF="http://info.cern.ch/hypertext/WWW/Provider/Style/Overview.html">style 
  936. guide</A> for online hypertext document structures 
  937.  
  938. </ul>
  939. <p>
  940. ____________________________________________________________________
  941. <ADDRESS> A Beginner's Guide to HTML/ NCSA / pubs@ncsa.uiuc.edu </ADDRESS>
  942.  
  943.  
  944.  
  945. </BODY></HTML>